<template>
  <div class="platformContainer">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span class="card_title">充值</span>
      </div>
      <div class="content">
        <div class="number">
          <span class="number1">当前可用数量：<span class="number2">{{ num }}</span></span>
        </div>
        <div class="recharge_num">
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="充值台数">
              <el-select v-model="form.region" >
                <el-option label="100" value="shanghai"></el-option>
                <el-option label="200" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item class="tianjia">
              <el-button class="btn" type="primary" @click="onSubmit">添加</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </el-card>
  </div>
</template>
<script>



export default {
  data() {
    return {
      num: 96,
      form: {}
    }
  },
  methods: {

  },
  // 使用
  mounted() {
    this.$nextTick(() => {
    });
  },
}
</script>
<style scoped>
::v-deep .tianjia .el-form-item__content {
  margin-left: 0 !important;
}

.btn {
  width: 2.5rem;
  margin-top: 40px;
}

.card_title {
  font-size: medium;
  font-weight: bold;

}

.box-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.box-card .tag1_text {
  display: block;
  padding: .25rem 0;
  font-size: .2rem;
  color: #bec2c2;
}

.platformContainer {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.content {
  padding: .25rem;
}

.number {
  width: 23%;
  height: .875rem;
  background-color: hsla(197, 81%, 45%, 0.281);
  display: flex;
  align-items: center;
  padding: 0 .25rem;
}

.number1 {
  font-size: .175rem;
  font-weight: bold;
}

.number2 {
  font-size: .1875rem;
  color: rgb(26, 115, 216);
}

.recharge_num {
  margin-top: .25rem;
  width: 23%;
}
</style>